<form style="margin:0 auto;">
    <div class="verticalSection">
        <h2 class="sectionTitle">
            ${Subtitles}
        </h2>

        <div class="selectContainer">
            <select is="emby-select" id="selectSubtitleLanguage" label="${LabelPreferredSubtitleLanguage}"></select>
        </div>

        <div class="selectContainer">
            <select is="emby-select" id="selectSubtitlePlaybackMode" label="${LabelSubtitlePlaybackMode}">
                <option value="Default">${Default}</option>
                <option value="Smart">${Smart}</option>
                <option value="OnlyForced">${OnlyForcedSubtitles}</option>
                <option value="Always">${AlwaysPlaySubtitles}</option>
                <option value="None">${None}</option>
            </select>
            <div class="fieldDescription subtitlesDefaultHelp subtitlesHelp hide">${DefaultSubtitlesHelp}</div>
            <div class="fieldDescription subtitlesSmartHelp subtitlesHelp hide">${SmartSubtitlesHelp}</div>
            <div class="fieldDescription subtitlesAlwaysHelp subtitlesHelp hide">${AlwaysPlaySubtitlesHelp}</div>
            <div class="fieldDescription subtitlesOnlyForcedHelp subtitlesHelp hide">${OnlyForcedSubtitlesHelp}</div>
            <div class="fieldDescription subtitlesNoneHelp subtitlesHelp hide">${NoSubtitlesHelp}</div>
        </div>

        <div class="selectContainer fldBurnIn hide">
            <select is="emby-select" id="selectSubtitleBurnIn" label="${LabelBurnSubtitles}">
                <option value="">${Auto}</option>
                <option value="onlyimageformats">${OnlyImageFormats}</option>
                <option value="allcomplexformats">${AllComplexFormats}</option>
                <option value="all">${All}</option>
            </select>
            <div class="fieldDescription">${BurnSubtitlesHelp}</div>
        </div>

        <div class="checkboxContainer checkboxContainer-withDescription fldRenderPgs hide">
            <label>
                <input is="emby-checkbox" type="checkbox" id="chkSubtitleRenderPgs" />
                <span>${RenderPgsSubtitle}</span>
            </label>
            <div class="fieldDescription checkboxFieldDescription">${RenderPgsSubtitleHelp}</div>
        </div>
    </div>

    <div class="checkboxContainer checkboxContainer-withDescription">
        <label>
            <input is="emby-checkbox" type="checkbox" id="chkAlwaysBurnInSubtitleWhenTranscoding" />
            <span>${AlwaysBurnInSubtitleWhenTranscoding}</span>
        </label>
        <div class="fieldDescription checkboxFieldDescription">${AlwaysBurnInSubtitleWhenTranscodingHelp}</div>
    </div>

    <div class="verticalSection subtitleAppearanceSection hide">
        <h2 class="sectionTitle">
            ${HeaderSubtitleAppearance}
        </h2>

        <div class="subtitleappearance-fullpreview subtitleappearance-fullpreview-hide">
            <div class="subtitleappearance-fullpreview-window">
                <div class="subtitleappearance-fullpreview-text">
                    ${HeaderSubtitleAppearance}
                    <br>
                    ${TheseSettingsAffectSubtitlesOnThisDevice}
                </div>
            </div>
        </div>

        <div style="margin: 2em 0 2em;">
            <div class="subtitleappearance-preview flex align-items-center justify-content-center" style="margin:2em 0;padding:1.6em;color:black;background:linear-gradient(140deg,#aa5cc3,#00a4dc);">
                <div class="subtitleappearance-preview-window flex align-items-center justify-content-center" style="width: 90%; padding: .25em;">
                    <div class="subtitleappearance-preview-text flex align-items-center justify-content-center">
                        ${TheseSettingsAffectSubtitlesOnThisDevice}
                    </div>
                </div>
            </div>
            <div class="fieldDescription">${SubtitleAppearanceSettingsDisclaimer}</div>
            <div class="fieldDescription">${SubtitleAppearanceSettingsAlsoPassedToCastDevices}</div>
        </div>

        <div class="selectContainer">
            <select is="emby-select" id="selectSubtitleStyling" label="${LabelSubtitleStyling}">
                <option value="Auto">${Auto}</option>
                <option value="Custom">${Custom}</option>
                <option value="Native">${Native}</option>
            </select>
            <div class="fieldDescription subtitleStylingAutoHelp subtitleStylingHelp hide">${AutoSubtitleStylingHelp}</div>
            <div class="fieldDescription subtitleStylingCustomHelp subtitleStylingHelp hide">${CustomSubtitleStylingHelp}</div>
            <div class="fieldDescription subtitleStylingNativeHelp subtitleStylingHelp hide">${NativeSubtitleStylingHelp}</div>
        </div>

        <div class="selectContainer">
            <select is="emby-select" id="selectTextSize" label="${LabelTextSize}">
                <option value="smaller">${Smaller}</option>
                <option value="small">${Small}</option>
                <option value="">${Normal}</option>
                <option value="large">${Large}</option>
                <option value="larger">${Larger}</option>
                <option value="extralarge">${ExtraLarge}</option>
            </select>
        </div>

        <div class="selectContainer">
            <select is="emby-select" id="selectTextWeight" label="${LabelTextWeight}">
                <option value="normal">${Normal}</option>
                <option value="bold">${Bold}</option>
            </select>
        </div>

        <div class="selectContainer">
            <select is="emby-select" id="selectFont" label="${LabelFont}">
                <option value="">${Default}</option>
                <option value="typewriter">${Typewriter}</option>
                <option value="print">${Print}</option>
                <option value="console">${Console}</option>
                <option value="cursive">${Cursive}</option>
                <option value="casual">${Casual}</option>
                <option value="smallcaps">${SmallCaps}</option>
            </select>
        </div>

        <div class="inputContainer hide">
            <input is="emby-input" id="inputTextBackground" label="${LabelTextBackgroundColor}" type="text" />
        </div>

        <div class="selectContainer">
            <input is="emby-input" id="inputTextColor" label="${LabelTextColor}" type="color" />
        </div>

        <div class="selectContainer hide">
            <select is="emby-select" id="selectTextColor" label="${LabelTextColor}">
                <option value="#ffffff">${SubtitleWhite}</option>
                <option value="#d3d3d3">${SubtitleLightGray}</option>
                <option value="#808080">${SubtitleGray}</option>
                <option value="#ffff00">${SubtitleYellow}</option>
                <option value="#008000">${SubtitleGreen}</option>
                <option value="#00ffff">${SubtitleCyan}</option>
                <option value="#0000ff">${SubtitleBlue}</option>
                <option value="#ff00ff">${SubtitleMagenta}</option>
                <option value="#ff0000">${SubtitleRed}</option>
                <option value="#000000">${SubtitleBlack}</option>
            </select>
        </div>

        <div class="selectContainer">
            <select is="emby-select" id="selectDropShadow" label="${LabelDropShadow}">
                <option value="none">${None}</option>
                <option value="raised">${Raised}</option>
                <option value="depressed">${Depressed}</option>
                <option value="uniform">${Uniform}</option>
                <option value="">${DropShadow}</option>
            </select>
        </div>

        <div class="sliderContainer-settings">
            <div class="sliderContainer">
                <input is="emby-slider" id="sliderVerticalPosition" label="${LabelSubtitleVerticalPosition}" type="range" min="-16" max="16" />
            </div>
            <div class="fieldDescription">${SubtitleVerticalPositionHelp}</div>
        </div>

        <div class="checkboxContainer">
            <label>
                <input is="emby-checkbox" type="checkbox" class="chkPreview" />
                <span>${Preview}</span>
            </label>
        </div>
    </div>

    <button is="emby-button" type="submit" class="raised button-submit block btnSave hide">
        <span>${Save}</span>
    </button>
</form>
